<template>
	<div class="bigView">
		<view class="topView">
			<image src="../../static/img/dcjy/bg_jianbian.png" style="width: 100vw;"></image>
			<!-- <view class="homeTitle" :style="[{marginTop:TopHeight-40 + 'px'}]">
				魅力嘉园
			</view> -->
		</view>
		<view class="topView2" :style="[{height:CustomBar+20 + 'px'}]">
			<view class="title" :style="[{height:'44px',marginTop: StatusBar+'px'}]">
				多彩嘉园
			</view>
		</view>
		<view class="top2">
			<view class="top2One" @click="handle(0)">
				<view class="topItemImg">
					<image src="../../static/img/dcjy/icon_gonghui.png" style="width: 30px;height: 30px"></image>
				</view>
				<view>航嘉工会</view>
			</view>
			<view class="top2One" @click="handle(1)">
				<view class="topItemImg" style="background-color: #D7F7ED;">
					<image src="../../static/img/dcjy/icon_peixun.png" style="width: 30px;height: 30px"></image>
				</view>
				<view>员工培训</view>
			</view>
		</view>
		<!-- <view style="font-weight: bold;margin-left: 16px;margin-top: 22px;font-size: 17px;z-index: 2;">员工活动通知</view> -->
		<view class="clubView2" style="z-index: 2;">
			<view style="font-weight: bold;margin-left: 16px;font-size: 17px;">员工活动通知</view>
			<view style="display: flex;flex-direction: row;align-items: center;margin-right: 16px;" @click="handle(2)">
				<view style="color: #98A1B3;font-size: 13px;margin-right: 8px;">更多</view>
				<image src="../../static/img/ic_arrowgray.png" style="width: 6px;height: 10px"></image>
			</view>
		</view>
		<view @click="handle(2)" style="border-radius: 16px;width: calc(100vw - 32px);height:170px;margin-left:16px;z-index: 2;">
			<image src="https://l-cllyert.oss-accelerate.aliyuncs.com/video_file/banner500985.png" style="width: 100%;height: 100%;border-radius: 16px;"></image>
		</view>
		<view class="clubView2">
			<view style="font-weight: bold;margin-left: 16px;font-size: 17px;">俱乐部</view>
			<view style="display: flex;flex-direction: row;align-items: center;margin-right: 16px;" @click="handle(3)">
				<view style="color: #98A1B3;font-size: 13px;margin-right: 8px;">更多</view>
				<image src="../../static/img/ic_arrowgray.png" style="width: 6px;height: 10px"></image>
			</view>
		</view>
		<view class="bottomView">
			<view class="clubView" @click="jumpToClubHandle(0)">
				<view class="clubTitle">篮球</view>
				<image src="../../static/img/dcjy/club_1.png" mode="widthFix" class="clubImg"></image>
			</view>
			<view class="clubView" @click="jumpToClubHandle(1)">
				<view class="clubTitle">足球</view>
				<image src="../../static/img/dcjy/club_2.png" mode="widthFix" class="clubImg"></image>
			</view>
			<view class="clubView" @click="jumpToClubHandle(4)">
				<view class="clubTitle">徒步</view>
				<image src="../../static/img/dcjy/club_3.png" mode="widthFix" class="clubImg"></image>
			</view>
			<view class="clubView" @click="jumpToClubHandle(3)">
				<view class="clubTitle">羽毛球</view>
				<image src="../../static/img/dcjy/club_4.png" mode="widthFix" class="clubImg"></image>
			</view>
		</view>
		
		<view class="jiarenshouce" @click="feedbackHandle">
			
			<view style="display: flex;flex-direction: row;align-items: center;">
				<!-- <image src="../../static/img/fuwudating/icon_shouce.png" style="width: 54rpx;height: 54rpx;margin-left: 35rpx;"></image> -->
				<view style="margin-left: 35rpx;">
					<u-icon name="order" size="28"></u-icon>
				</view>
				<view class="left" style="color: #313742;font-size: 30rpx">意见反馈</view>
			</view>
			<view style="display: flex;flex-direction: row;margin-right: 16px;align-items: center;">
			  <!-- <view style="color: #98A1B3;font-size: 26rpx;margin-right: 16rpx;">查看</view> -->
			  <image src="../../static/img/ic_arrowgray.png" style="width: 6px;height: 10px;"></image>
			</view>
		</view>
		<!-- <view class="cu-custom" :style="[{height:CustomBar+20 + 'px'}]">
			<view class="title" :style="[{height:'44px',marginTop: StatusBar+'px'}]">
				多彩嘉园
			</view>
			<image src="../../static/img/dcbg.png" :style="[{height:CustomBar+20 + 'px'}]" class="topImg"></image>
		</view>
		<view class="container" v-for="(item,index) in list" :key="index" @click="handle(index)">
			<image :src="item.name" class="iconImg"></image>
		  <view class="left">{{item.title}}</view>
		  <view style="display: flex;flex-direction: row;margin-right: 16px;">
			  <view style="color: #247BFD;font-size: 12px;">点击查看</view>
			  <image src="../../static/img/ic_arrow.png" style="width: 16px;height: 16px;"></image>
		  </view>
		</view> -->
	</div>
</template>
	
<script>
	export default{
		data(){
			return{
				StatusBar: this.StatusBar,
				CustomBar: 0,//this.$statusBarHeight
				TopHeight:0,
				// list: [{
				// 	name: '/static/img/gonghui.png',
				// 	title: '航嘉工会'
				// 	},
				// 	{
				// 		name: '/static/img/ic_peixun.png',
				// 		title: '员工培训通知'
				// 	},
				// 	{
				// 		name: '/static/img/ic_huodong.png',
				// 		title: '员工活动通知'
				// 	},
				// 	{
				// 		name: '/static/img/ic_julebu.png',
				// 		title: '俱乐部'
				// 	}
				// ],
			}
		},
		mounted() {
			// uni.showModal({
			// 	title:"测试"
			// })
			// this.CustomBar = this.$statusBarHeight;
			// uni.showModal({
			// 	title:this.CustomBar+''
			// })
			uni.getSystemInfo({success: (e) => {
				this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
					// Vue.prototype.StatusBar = e.statusBarHeight;
					// let custom = wx.getMenuButtonBoundingClientRect();
					// Vue.prototype.Custom = custom;
					// Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
			}})
		},
		methods:{
			// 意mqb反馈
			feedbackHandle(){
				uni.navigateTo({
					url: '/packageDcjy/pages/feedback/index'
				})
			},
			handle(value){
				switch (value){
					case 0://航嘉工会
						// uni.navigateTo({
						// 	url: '/packageDcjy/pages/gonghui/index'
						// })
						wx.navigateToMiniProgram({
						  appId: 'wxfcc5a91b4f0d6e38',
						  // path: 'pages/detail/detail?url=https://doc.weixin.qq.com/forms/ACcAFgcEABEAfUAyAYLAEYpmWwO40hSCf#/',
						  envVersion: 'release',
						  success(res) {
							console.log('跳转了')
							// 跳转成功
						  },
						  fail: function (e) {
									
						  }
						})
						break;
					case 1://员工培训通知
						uni.navigateTo({
							url: '/packageDcjy/pages/training/index?trainingType=1'
						})
						break;
					case 2://员工活动通知
						uni.navigateTo({
							url: '/packageDcjy/pages/training/index?trainingType=2'
						})
						break;
					case 3:
						// uni.navigateTo({
						// 	url: '/packageDcjy/pages/club/index'
						// })
						uni.navigateTo({
							url: '/packageDcjy/pages/club/index2'
						})
						break;
					default:
						break;
				}
			},
			jumpToClubHandle(value){
				uni.navigateTo({
					url: '/packageDcjy/pages/club/index2?clubType='+value
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-custom{
		// background-color: orange;
		/* display: flex; */
		/* align-items: center; */
		// background: linear-gradient(to bottom, #FAFAD2, #FFFFF0);
		// background-image: url('/static/img/dcbg.png');
		// background-image: url('../../static/img/dcbg.png');
		// width: 100vw;
		// height: 100px;
		background: linear-gradient(to bottom, #7ABCFE, #F7F7F7);
		position: relative;
		.topImg{
			position: absolute;
			top: 0;
			width: 100%;
		}
		.title{
			/* background-color: green; */
			position: absolute;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 2;
			font-size: 16px;
			font-weight: bold;
			color: #000000;
		}
	}
	.bigView{
		background-color: #F5F7FA;//#F7F7F7;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column
	}
	.topView{
		width: 100vw;
		height: 500rpx;
		position: fixed;
		z-index: 0px;
		// background: linear-gradient(to bottom, #7ABCFE, #F7F7F7);
	}
	.topView2{
		width: 100vw;
		// background-color: red;
		display: flex;
		// align-items: center;
		justify-content: center;
	}
	.title{
		/* background-color: green; */
		position: absolute;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		z-index: 2;
		font-size: 16px;
		padding-left: 20px;
		font-weight: bold;
		color: #000000;
	}
	.top2{
		width: 100vw;
		height: 60pt;
		// background-color: red;
		display: flex;
		flex-direction: row;
		z-index: 2;
		.top2One{
			width: calc((100vw - 48px) / 2);
			height: 100%;
			background-color: white;//#FFFFFF;
			margin-left: 16px;
			border-radius: 5px;
			display: flex;
			flex-direction: row;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
	}
	.topItemImg{
		width: 50px;
		height: 50px;
		border-radius: 25px;
		background-color: #DFE8FE;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottomView{
		display: flex;
		flex-direction: row;
	}
	.clubView{
		width: calc((100vw - 60px) / 4);
		position: relative;
		margin-left: 12px;
	}
	.clubView2{
		display: flex;
		flex-direction: row;
		width: 100vw;
		height: 40px;
		// background-color: red;
		margin-top: 22px;
		align-items: center;
		justify-content: space-between;
	}
	.clubTitle{
		position: absolute;
		left: 24rpx;
		top: 15rpx;
		// margin-left: 10px;
		margin-top: 8px;
		font-size: 14px;
	}
	.clubImg{
		height: 116px;
		width: 100%;
	}
	.dcitem{
		width: 100vw;
		height: 80px;
		background-color: white;
		display: flex;
		align-items: center;
		&-top{
			display: flex;
			flex-direction: row;
			&-title{
				background-color: red;
				// display: flex;
				// align-items: center;
				margin-left: 16px;
				flex-grow: 1;
				// width: 200px;
			}
		}
		
	}
	.iconImg{
		margin-left: 16px;
		width: 48px;
		height: 48px;
	}
	.container {
	  // display: flex; /* 设置父容器为flex容器 */
	  width: 100vw;
	  height: 80px;
	  background-color: white;
	  display: flex;
	  align-items: center;
	}
	
	.left {
	  // width: 200px; /* 左侧div的固定宽度 */
	  // background-color: lightblue; /* 为了可视化 */
	  flex-grow: 1; /* 让右侧div占据所有剩余空间 */
	  padding-left: 12px;
	  font-size: 16px;
	}
	
	.right {
	  
	  background-color: lightgreen; /* 为了可视化 */
	  
	}
	
	.jiarenshouce{
		height: 128rpx;
		background-color: white;
		width: calc(100vw - 30px);//calc(100vw-50px);
		margin-top: 20px;
		border-radius: 10px;
		background-color: white;
		margin-left: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
// .box{
// 		width: 100px; 
// 		height: 100px;
// 		background-color: #909193;
// 		border-radius: 15px;
// 		margin-bottom: 50px;
// 	}
</style>